<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/sui-append.min.css">
    <link rel="stylesheet" href="css/sui.min.css">
    <script src="js/sui.min.js"></script>

</head>
<body>
<div style="padding-left: 50px;padding-top: 50px">
    <ul class="example">
    <li><a href="#" data-placement="top" data-toggle="tooltip" title="浮出在<b>top</b>的tooltip">看top</a></li>
    <li><a href="#" data-placement="right" data-toggle="tooltip" title="浮出在<b>right</b>的tooltip">看right</a></li>
    <li><a href="#" data-placement="bottom" data-toggle="tooltip" title="浮出在<b>bottom</b>的tooltip">看bottom</a></li>
    <li><a href="#" data-placement="left" data-toggle="tooltip" title="浮出在<b>left</b>的tooltip">看left</a></li>
    <li><a href="#" data-placement="bottom" data-toggle="tooltip" title="浮出在<b>bottom</b>的tooltip">看bottom</a></li>
</ul>
    <div class="sui-progress">
        <div style="width: 20%;" class="bar">20%</div>
    </div>
    <div class="sui-progress progress-danger">
        <div style="width: 40%;" class="bar">40%</div>
    </div>
    <div class="sui-progress progress-success">
        <div style="width: 60%;" class="bar">60%</div>
    </div>
    <div class="sui-progress progress-warning">
        <div style="width: 80%;" class="bar">80%</div>
    </div>
    <div class="sui-progress progress-info">
        <div style="width: 100%;" class="bar">100%</div>
    </div>
</div>
<p></p>
<div class="sui-msg msg-large msg-error">
    <div class="msg-con">错误信息提示</div>
    <s class="msg-icon"></s>
</div>
</body>
</html>